<div class="container">
    <div class="new-item row no-wrap" [ngClass]="getItemClass()" (click)="onOpenDetail()">
        <nzm-badge *ngIf="showStatus && data.status" [text]="' '" [corner]="true" class="new-item-badge">
        </nzm-badge>
        <!-- <div class="left-item"></div> -->
        <div class="middle-item col-span-3 between-span">
            <div class="title">{{ data.type | dict }}</div>
            <!-- <div class="time">
                <div>{{ data.time | date: 'yyyy年MM月dd日 HH:ss' }}</div>
            </div> -->
        </div>
        <div class="right-item col-span-9">
            <div class="title">
                <span class="datatitle">{{ data.title }}</span>
                <span class="datatime">{{ data.time | date: 'yyyy年MM月dd日 HH:ss' }}</span>
            </div>
            <div class="content">
                {{ data.content.length > 40 ? data.content.slice(0, 40) + '...' : data.content }}
            </div>
        </div>
    </div>

    <div [@fold]="isFolded ? 'closed' : 'open'">
        <!-- <div #detail style="height:300px;background:#f5f5f5;"> -->
        <div #detail style="height:50px;background:#FFFAFA;">
            <ion-grid>
                <ion-row>
                    <ion-col size="4">
                        <div class="msg-type messagebt">消息类型</div>
                        <!-- <ion-card style="background:#fff">
                        <ion-card-content class="ion-text-center">
                            <div class="msg-type">消息类型</div>
                        </ion-card-content>
                        </ion-card> -->
                    </ion-col>
                    <ion-col size="4">
                        <div class="msg-title messagebt">消息事件,{{ test }}</div>
                        <!-- <ion-card style="background:#fff">
                        <ion-card-content class="ion-text-center">
                            <div class="msg-title">消息事件,{{ test }}</div>
                        </ion-card-content>
                        </ion-card> -->
                    </ion-col>
                    <!-- <ion-col size="12">
                        <ion-card style="background:#fff;">
                            <ion-card-content class="ion-text-center">
                                <div class="msg-content" style="height:120px;text-align: left;text-indent: 2em;">
                                    消息详情
                                </div>
                            </ion-card-content>
                        </ion-card>
                    </ion-col> -->
                </ion-row>
            </ion-grid>
        </div>
    </div>

    <div [@show]="isFolded ? 'closed' : 'open'" class="row center-span" style="right: 0;bottom: 21px;position: absolute;left: 240; opacity: 0">
        <div class="row middle-span center-span" style="width:120px;">
            <div class="messagebt" (click)="!isFolded && goToDetail()">查看详情
            </div>
            <!-- <ion-icon name="arrow-forward"></ion-icon> -->
        </div>
    </div>
</div>
